<template>
  <view>
    <u-navbar title="违规举报" autoBack fixed placeholder></u-navbar>
    <view class="content">
      <u-gap height="10px" bgColor="#f5f5f5"></u-gap>
      <view class="radio">
        <u-radio-group placement="column" active-color="#00a679" @change="changeVal">
          <view>违反法律法规</view>
          <view name="radio">
            <u-radio name="违法违规">违法违规</u-radio>
            <u-radio name="色情">色情</u-radio>
            <u-radio name="低俗">低俗</u-radio>
            <u-radio name="赌博诈骗">赌博诈骗</u-radio>
          </view>
          <view>谣言类不实信息</view>
          <view name="radio">
            <u-radio name="涉政谣言">涉政谣言</u-radio>
            <u-radio name="疫情谣言">疫情谣言</u-radio>
            <u-radio name="涉社会事件谣言">涉社会事件谣言</u-radio>
            <u-radio name="虚假不实消息">虚假不实消息</u-radio>
          </view>
          <view>侵犯个人权益</view>
          <view name="radio">
            <u-radio name="人身攻击">人身攻击</u-radio>
            <u-radio name="侵犯隐私">侵犯隐私</u-radio>
          </view>
          <view>有害社区环境</view>
          <view name="radio">
            <u-radio name="垃圾广告">垃圾广告</u-radio>
            <u-radio name="引战">引战</u-radio>
            <u-radio name="剧透">剧透</u-radio>
            <u-radio name="刷屏">刷屏</u-radio>
            <u-radio name="抢楼">抢楼</u-radio>
            <u-radio name="视频不相关">视频不相关</u-radio>
            <u-radio name="青少年不良信息">青少年不良信息</u-radio>
            <u-radio name="违规抽奖">违规抽奖</u-radio>
            <u-radio name="其他">其他</u-radio>
          </view>
        </u-radio-group>
        <u-textarea v-model="content" placeholder="请填写举报理由" style="background-color: #eee;padding: 5px 10px;" 
        maxlength="200" v-if="radio == '其他'"></u-textarea>
        <view>
          <view class="submitBtn" @click="handleSubmit">提交</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  addReport
} from '@/api'
export default {
  components: {},
  data() {
    return {
      radio: '',
      content: '',
      objId: ''
    }
  },
  computed: {},
  methods: {
    changeVal(val) {
      this.radio = val
    },
    handleSubmit() {
      let type = '1'
      if(this.radio.indexOf('其他') != -1) {
        type = '0'
        if((this.content ?? '') == '') {
          this.$toast.show({
            msg: '请输入举报理由'
          })
          return
        }
      }
      const params = {}
      params.userId = this.objId
      params.type = type
      params.radio = this.radio
      params.content = this.content
      params.reportId = this.$store.getters.id
      addReport(params).then(res => {
        this.$toast.show({
          msg: res.msg
        })
        if(res.code === 200) {
          this.timer = setTimeout(() => {
            uni.navigateBack()
          }, 300)
        }
      })
    }
  },
  onLoad(options) {
    this.objId = options.uid
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer)
  }
} 
</script>

<style lang="scss" scoped>
.radio {
  padding: 0 15px 10px;
  box-sizing: border-box;
  background-color: #fff;

  & > view {
    padding: 10px 0;
  }

  view[name='radio'] {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
  }

  .u-radio {
    width: 140px;
    padding: 5px 0;
  }

  .submitBtn {
    width: 100%;
    padding: 8px 0;
    box-sizing: border-box;
    background-color: $primary-theme-color;
    border-radius: 4px;
    color: #ffffff;
    text-align: center;
  }
}
</style>